<!DOCTYPE html>
<html>

	<head>
		<title>客户关系管理系统-查看归档服务</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/normalize.min.css" />

		<script src="../../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

		<!--[if lte IE 8]>
			<script src="../../js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/respond.min.js" type="text/javascript" charset="utf-8"></script>
		<![endif]-->

		<!-- 界面自定义CSS文件 -->
		<link rel="stylesheet" type="text/css" href="../../css/custom/scrollbar-style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/custom/html-cust-service.min.css" />

		<!--界面自定义JS文件-->
		<script src="../../js/custom/tip-popover.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/custom/html-cust-service.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div class="container-fluid">

			<!--TODO 当前页面地理位置 (面包屑导航)-->
			<ul class="breadcrumb">
				<li>服务管理</li>
				<li>查看归档服务</li>
			</ul>

			<!--TODO 搜索表单及工具按钮-->
			<form id="form-search" method="get" class="form-inline">

				<div class="form-group">
					<label class="control-label">客户编号：</label>
					<div class="input-group">
						<span class="input-group-addon">CST</span>
						<input class="form-control" />
					</div>

					<label class="control-label">客户名称：</label>
					<input class="form-control" />
				</div>

				<div class="form-group">
					<label class="control-label">服务概要：</label>
					<input class="form-control" />

					<label class="control-label">服务类型：</label>
					<select class="form-control">
						<option class="text-muted">全部</option>
						<option>咨询</option>
						<option>建议</option>
						<option>投诉</option>
					</select>

					<label class="control-label">创建时间：</label>
					<input class="form-control" type="date" /> -
					<input class="form-control" type="date" />
				</div>

				<div class="form-group btn-group">
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-search"></span>
						查询
					</button>
				</div>

			</form>

			<hr />

			<!--TODO 数据列表-->
			<table class="table table-hover table-bordered">
				<thead class="bg-primary">
					<tr>
						<th class="hidden-xs">#</th>
						<th>客户名称</th>
						<th>概要</th>
						<th>分配情况</th>
						<th class="hidden-xs">类型</th>
						<th class="hidden-xs">创建</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="hidden-xs">456</td>
						<td>聪海信息科技有限公司</td>
						<td>询问收音机订单运费承担方式</td>
						<td>
							<div class="text-success">
								小李
								<div class="visible-xs"></div>
								[2018/02/08
								<div class="visible-xs"></div>12:31:06]
							</div>
						</td>
						<td class="hidden-xs">咨询</td>
						<td class="hidden-xs">
							李天明
							<span class="text-muted">[2018/02/08 12:31:06]</span>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="hidden-xs">457</td>
						<td>聪海信息科技有限公司</td>
						<td>询问收音机订单运费承担方式</td>
						<td>
							<div class="text-success">
								小李
								<div class="visible-xs"></div>
								[2018/02/08
								<div class="visible-xs"></div>12:31:06]
							</div>
						</td>
						<td class="hidden-xs">咨询</td>
						<td class="hidden-xs">
							李天明
							<span class="text-muted">[2018/02/08 12:31:06]</span>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="hidden-xs">458</td>
						<td>聪海信息科技有限公司</td>
						<td>询问收音机订单运费承担方式</td>
						<td>
							<div class="text-success">
								小李
								<div class="visible-xs"></div>
								[2018/02/08
								<div class="visible-xs"></div>12:31:06]
							</div>
						</td>
						<td class="hidden-xs">咨询</td>
						<td class="hidden-xs">
							李天明
							<span class="text-muted">[2018/02/08 12:31:06]</span>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="hidden-xs">459</td>
						<td>聪海信息科技有限公司</td>
						<td>询问收音机订单运费承担方式</td>
						<td>
							<div class="text-success">
								小李
								<div class="visible-xs"></div>
								[2018/02/08
								<div class="visible-xs"></div>12:31:06]
							</div>
						</td>
						<td class="hidden-xs">咨询</td>
						<td class="hidden-xs">
							李天明
							<span class="text-muted">[2018/02/08 12:31:06]</span>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td class="hidden-xs">460</td>
						<td>聪海信息科技有限公司</td>
						<td>询问收音机订单运费承担方式</td>
						<td>
							<div class="text-success">
								小李
								<div class="visible-xs"></div>
								[2018/02/08
								<div class="visible-xs"></div>12:31:06]
							</div>
						</td>
						<td class="hidden-xs">咨询</td>
						<td class="hidden-xs">
							李天明
							<span class="text-muted">[2018/02/08 12:31:06]</span>
						</td>
						<td>
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" title="查看" data-toggle="modal" data-target="#modal-show">
									<span class="glyphicon glyphicon-search"></span>
									<span class="hidden-xs">查看</span>
								</button>
							</div>
						</td>
					</tr>

				</tbody>
			</table>

			<!--TODO 数据分页部分-->
			<div class="text-center">
				<ul class="pagination">
					<li class="disabled">
						<a>&lt;</a>
					</li>
					<li class="active">
						<a href="">1</a>
					</li>
					<li>
						<a href="">2</a>
					</li>
					<li>
						<a href="">3</a>
					</li>
					<li>
						<a href="">4</a>
					</li>
					<li>
						<a href="">5</a>
					</li>
					<li>
						<a href="">&gt;</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- TODO 查看信息modal部分 -->
		<div class="modal fade" id="modal-show">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
						</button>
						<h3 class="modal-title">
							查看服务信息
							<div class="visible-xs"></div>
							<small>[咨询]-聪海信息科技有限公司</small>
						</h3>
					</div>

					<div class="modal-body">
						<table class="table table-condensed">
							<tr>
								<th class="bg-info" align="right">客户名称</th>
								<td>聪海信息科技有限公司</td>
								<th class="bg-info" align="right">概要</th>
								<td>询问收音机订单运费承担方式</td>
							</tr>
							<tr>
								<th class="bg-info" align="right">分配状态</th>
								<td><span class="text-success">已分配</span></td>
								<th class="bg-info" align="right">类型</th>
								<td>咨询</td>
							</tr>
							<tr>
								<th class="bg-info" align="right">分配人员</th>
								<td>小李</td>
								<th class="bg-info" align="right">分配时间</th>
								<td>2018/02/08
									<div class="visible-xs"></div>12:31:06</td>
							</tr>
							<tr>
								<th class="bg-info" align="right">归档时间</th>
								<td colspan="3" class="text-primary">2018/02/08
									<div class="visible-xs"></div>12:31:06</td>
							</tr>
						</table>
						<hr/>
						<table class="table table-hover table-condensed">
							<caption>服务处理情况：</caption>
							<thead>
								<tr class="bg-info">
									<th>时间</th>
									<th>处理详细</th>
									<th>处理结果</th>
									<th>满意度</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>2018/02/09
										<div class="visible-xs"></div>12:31:06</td>
									<td>已告知对方相关内容</td>
									<td>对方已知悉</td>
									<td>
										<div class="text-success">
											&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;
										</div>
									</td>
								</tr>
								<tr>
									<td>2018/02/08
										<div class="visible-xs"></div>12:31:06</td>
									<td>联系对方但没有回应</td>
									<td>无回应</td>
									<td>-</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="modal-footer">
						<button class="btn btn-default" type="button" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							关闭
						</button>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>